<template>
  <div class="app-container">
    <el-button
      plain
      icon="el-icon-plus"
      size="small"
      type="success"
      @click="dialogVisible = true"
      style="margin-bottom: 20px"
      >创建方案</el-button
    >
    <help></help>

    <el-table border v-loading="loading" :data="list">
      <el-table-column align="center" label="种植物名称" prop="plantName" />
      <el-table-column align="center" label="生产周期（天）" prop="productionTime" />
      <el-table-column align="center" label="方案适用时段" prop="plan" />
      <el-table-column align="center" label="适用地区" prop="area" />
      <el-table-column align="center" label="创建人" prop="createName" />
      <el-table-column align="center" label="创建时间" prop="createTime" />
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.plant_scheme_state" :value="scope.row.state" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-edit" @click="standardInfo(scope.row.plantStandardId)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList"
    />

    <help-dialog :title="title" :visible.sync="dialogVisible" @close="closeDialog">
      <el-form size="small" label-width="140px" :model="queryParam" ref="form" :rules="rules">
        <div class="label">方案基础信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="种植物名称" prop="plantName">
              <el-input v-model="queryParam.plantName" placeholder="请输入种植物名称" clearable />
            </el-form-item>
            <el-form-item label="方案适用时段" prop="plan">
              <el-input v-model="queryParam.plan" placeholder="请输入方案适用时段" clearable />
            </el-form-item>
            <el-form-item label="预估产量（亩）" prop="output">
              <el-input v-model="queryParam.output" placeholder="请输入预估产量（亩）" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产周期（天）" prop="productionTime">
              <el-input
                v-model="queryParam.productionTime"
                type="number"
                placeholder="请输入生产周期（天）"
                clearable
              />
            </el-form-item>
            <el-form-item label="适用地区" prop="area">
              <el-input v-model="queryParam.area" placeholder="请输入适用地区" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="label">方案内容</div>
        <design ref="design" :list="queryParam.list" @verify="handleVerify" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button v-if="queryParam.plantStandardId" type="primary" @click="updateStandard">修 改</el-button>
        <el-button v-else type="primary" @click="addStandard">确 定</el-button>
      </div>
    </help-dialog>
  </div>
</template>

<script>
import standardApi from '@/api/production/standard'
import Design from '@/views/production/standard/components/Design'

export default {
  dicts: ['plant_scheme_state', 'plant_node', 'report_state'],
  components: { Design },
  data() {
    return {
      title: '创建方案',
      loading: false,
      list: [],
      query: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dialogVisible: false,
      queryParam: {
        plantName: '',
        productionTime: '',
        plan: '',
        area: '',
        output: '',
        list: []
        // plantNode: '',
        // time: [],
        // startTime: '',
        // endTime: '',
        // product: '',
        // consumption: '',
        // illustration: '',
        // report: '',
      },
      rules: {
        plantName: [{ required: true, message: '请输入种植物名称', trigger: 'blur' }],
        productionTime: [{ required: true, message: '请输入生产周期（天）', trigger: 'blur' }],
        plan: [{ required: true, message: '请输入方案适用时段', trigger: 'blur' }],
        area: [{ required: true, message: '请输入适用地区', trigger: 'blur' }],
        output: [{ required: true, message: '请输入预估产量（亩）', trigger: 'blur' }]
        // plantNode: [{ required: true, message: '请选择种植节点', trigger: 'blur' }],
        // time: [{ required: true, message: '请选择建议阶段起止时间', trigger: 'blur' }],
        // product: [{ required: true, message: '请输入建议农资品', trigger: 'blur' }],
        // consumption: [{ required: true, message: '请输入建议使用量（亩）', trigger: 'blur' }],
        // illustration: [{ required: true, message: '请输入说明', trigger: 'blur' }],
        // report: [{ required: true, message: '请选择是否需上报', trigger: 'blur' }],
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      standardApi.plantStandardList(this.query).then((res) => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    handleVerify(e) {
      this.queryParam.list = e
    },
    addStandard() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$refs.design.handleVerify()
          this.$nextTick(() => {
            if (this.queryParam.list.length == 0) {
              return
            }
            standardApi.plantStandardAdd(this.queryParam).then((res) => {
              this.$message.success('方案创建成功')
              this.closeDialog()
              this.getList()
            })
          })
        } else {
          return false
        }
      })
    },
    closeDialog() {
      this.dialogVisible = false
      this.queryParam = {
        plantName: '',
        productionTime: '',
        plan: '',
        area: '',
        output: '',
        plantNode: '',
        time: [],
        startTime: '',
        endTime: '',
        product: '',
        consumption: '',
        illustration: '',
        report: ''
      }
      this.title = '创建方案'
      this.$refs.form.clearValidate()
    },
    standardInfo(plantStandardId) {
      standardApi.plantStandardDetail({ plantStandardId: plantStandardId }).then((res) => {
        this.queryParam = res.data
        this.title = '方案修改'
        this.dialogVisible = true
      })
    },
    updateStandard() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$refs.design.handleVerify()
          this.$nextTick(() => {
            if (this.queryParam.list.length == 0) {
              return
            }
            standardApi.plantStandardUpdate(this.queryParam).then((res) => {
              this.$message.success('方案修改成功')
              this.closeDialog()
              this.getList()
            })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.label {
  font-size: 16px;
  font-weight: 700;
  color: #409eff;
  margin: 20px 0;
  border-left: 3px solid;
  padding-left: 5px;
  line-height: 20px;
}
</style>
